import React, { useEffect, useState } from 'react'
import { listdata } from '../../request/api'
import Mylist from '../../components/Mylist'
import { Button, SearchBar, Space, Card } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index() {
    let nav=useNavigate()
    const [value, setValue] = useState('')
    let [data, setdata] = useState([])
    let [ssdata, setssdata] = useState([])
    useEffect(() => {
        listdata().then(res => {
            console.log('lb', res)
            if (res.data.code == 200) {
                setdata(res.data.data)
            }
        })
    }, [])
    // 搜索
    let ss = (val) => {
        listdata(val).then(res => {
            console.log('ss', res)
            if (res.data.code == 200) {
                setssdata(res.data.data)
            }
        })
    }
    // 跳转详情？

    let tiao=(item)=>{
        nav(`/detail?img=${item.image}&date=${item.date}&price=${item.price}`)
    }
    return (
        <div style={{margin:'10px'}}>
            {/* 搜索 */}
            <div style={{display:'flex',justifyContent:'space-around'}}>
                <SearchBar placeholder='请输入内容' onChange={(val) => ss(val)} /><Button >搜索</Button>
            </div>
            
            {/* 搜索结果 */}
            <div>
                <h3>北京相关景点</h3>
                {
                    ssdata.length > 0 && ssdata.map((item, index) => {
                        return <Card key={index} onClick={()=>tiao(item)}>
                            <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                                <div><img src={item.image} alt="" style={{ width: '80px', height: '60px' }} /></div>
                                <div>
                                    <p>{item.title}</p>
                                    <p>{item.date}</p>
                                    <p>{item.price}</p>
                                </div>
                            </div>
                        </Card>
                    })
                }
            </div>
            {/* 列表封装 */}
            <h3>列表</h3>  
            <Mylist data={data}></Mylist>
        </div>
    )
}

export default Index
